<template>
	<div class="rank-details" v-if="rankList.length == 1">
		<!-- 排行详情页头部 start -->
		<div class="rank-details-hd">
			<!-- 详情页图片 start -->
			<div class="hd-img">
				<img :src="rankList[0].info.imgurl" />
			</div>
			<!-- 详情页图片 end -->

			<!-- 排行榜文本 start -->
			<div class="hd-content">
				<!-- 标题 start -->
				<div class="title">
					{{ rankList[0].info.rankname }}
				</div>
				<!-- 标题 end -->

				<!-- 时间 start -->
				<div class="time">
					{{ this.moment().format("Y年MM月DD日") }}
				</div>
				<!-- 时间 end -->

				<!-- 菜单 start -->
				<div class="means">
					<div class="btn play">
						<i>&#xe616;</i>
						播放
					</div>
					<div class="btn download">
						<i>&#xe611;</i>
						下载
					</div>
					<div class="btn operate">
						<i>&#xe852;</i>
						批量操作
					</div>
				</div>
				<!-- 菜单 end -->
			</div>
			<!-- 排行榜文本 end -->
		</div>
		<!-- 排行详情页头部 end -->

		<!-- 排行详情页身体 start -->
		<div class="rank-details-bd">
			<el-row class="title">
				<el-col :xs="12" :sm="12" :md="12" :lg="14">
					<span>排名</span>
					<span>歌曲名</span>
				</el-col>
				<el-col :xs="12" :sm="12" :md="12" :lg="10">
					<el-row>
						<el-col :span="8">
							<span>歌手</span>
						</el-col>
						<el-col :span="13">
							<span>专辑</span>
						</el-col>
						<el-col :span="3">
							<span>时间</span>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row
				class="song"
				v-for="(item, index) of rankList[0].songs.list"
				:key="item.audio_id"
			>
				<el-col :xs="12" :sm="12" :md="12" :lg="14" class="rank-singer">
					<span v-if="index <= 2" class="before">
						{{ index + 1 }}
					</span>
					<span v-else class="after">
						{{ index + 1 }}
					</span>
					<span class="filename">
						<em @click="getPlayMusic(item.hash)">{{
							item.filename.split(" - ")[1]
						}}</em>
						<i @click="targetVideoDetails(item.mvhash)">{{
							item.mvhash ? "&#xe6af;" : ""
						}}</i></span
					>
				</el-col>
				<el-col :xs="12" :sm="12" :md="12" :lg="10">
					<el-row>
						<el-col :span="8">
							<span class="singer">{{
								item.filename.split("-")[0]
							}}</span>
						</el-col>
						<el-col :span="13">
							<span
								class="remark"
								@click="targetAlbumDetails(item.album_id)"
							>
								{{ item.remark }}
							</span>
						</el-col>
						<el-col :span="3">
							<span class="time">{{ item.duration }}</span>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
		<!-- 排行详情页身体 end -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 获取rankid
			rankid: this.$route.params.rankid,
			// 音乐列表
			rankList: [],
		};
	},
	methods: {
		// 获取对应rankid下的音乐
		getData() {
			this.axios
				.get("/api-details", {
					params: {
						rankid: this.rankid,
						page: 1,
						json: true,
					},
				})
				.then((res) => {
					res.data.songs.list.forEach((item) => {
						item.duration = this.moment(
							item.duration * 1000
						).format("mm:ss");
					});
					res.data.info.imgurl = res.data.info.imgurl
						.split("/{size}")
						.join("");
					this.rankList.push(res.data);
				});
		},
		// 跳转到mv详情页面
		targetVideoDetails(videohash) {
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/videoDetails/${videohash}`);
		},
		// 点击播放音乐
		getPlayMusic(hash) {
			this.$store.dispatch("updatePlayMusic", { hash: hash, this: this });
		},
		// 点击跳转到专辑详情
		targetAlbumDetails(albumid) {
			this.$router.push(`/albumDetails/${albumid}`);
		},
	},
	mounted() {
		// 调用定义好的函数
		this.getData();
	},
};
</script>
<style lang="scss">
.rank-details {
	// 详情页头部 start
	.rank-details-hd {
		display: flex;
		// 图片 start
		.hd-img {
			width: 160px;
			height: 160px;
			cursor: pointer;
			img {
				width: 160px;
				height: 160px;
				border-radius: 10px;
			}
		}
		// 图片 end

		// 文本 start
		.hd-content {
			display: flex;
			flex-direction: column;
			margin-left: 20px;
			// 标题 start
			.title {
				font-size: 23px;
				font-weight: 700;
				color: #333;
			}
			// 标题 end

			// 时间 start
			.time {
				margin-top: 30px;
				font-size: 12px;
				color: #858585;
			}
			// 时间 end

			// 操作按钮 start
			.means {
				display: flex;
				margin-top: 55px;
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 108px;
					height: 32px;
					margin-right: 10px;
					font-size: 14px;
					border-radius: 16px;
					cursor: pointer;
					color: #333;
					background-color: #efefef;
					&:hover {
						background-color: #e3e3e3;
					}
					i {
						font-family: "iconfont";
						font-size: 18px;
					}
					&.play {
						background-image: linear-gradient(
							to right,
							#84b2fe,
							#5292fe
						);
						color: #fff;
						i {
							font-size: 15px;
							margin-right: 5px;
						}
						&:hover {
							background-image: linear-gradient(
								to right,
								transparent,
								transparent
							);
							background-color: #5192fe;
						}
					}
				}
			}
			// 操作按钮 end
		}
		// 文本 end
	}
	// 详情页头部 end

	// 排行榜详情页身体 start
	.rank-details-bd {
		padding-left: 10px;
		.title {
			padding: 0 10px;
			height: 44px;
			margin-top: 20px;
			border-bottom: 1px solid #f5f5f5;
			.el-col {
				height: 100%;
				line-height: 44px;
				span {
					font-size: 13px;
					color: #b0b0b0;
					margin-right: 20px;
					white-space: nowrap;
				}
			}
		}
		.song {
			padding: 0 10px;
			height: 44px;
			border-bottom: 1px solid #f5f5f5;
			.el-col {
				height: 44px;
				line-height: 44px;
				&.rank-singer {
					display: flex;
					align-items: center;
				}
				span {
					margin-right: 20px;
					&.before {
						width: 20px;
						height: 22px;
						line-height: 22px;
						text-align: center;
						font-size: 13px;
						color: #fff;
						background: url(../assets/img/rank-bg.svg) no-repeat 0
							2px;
						background-size: contain;
					}
					&.after {
						width: 20px;
						height: 22px;
						line-height: 22px;
						text-align: center;
						color: #333;
						font-size: 12px;
					}
					&.filename {
						width: 90%;
						color: #333;
						font-size: 13px;
						cursor: pointer;
						span {
							display: block;
							height: 44px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						&:hover {
							color: #5192fe;
						}
						i {
							position: absolute;
							font-family: "iconfont";
							font-size: 23px;
							color: #5192fe;
							margin-left: 5px;
							cursor: pointer;
							transform: translateY(1px);
						}
					}
					&.singer {
						display: inline-block;
						width: 90%;
						font-size: 13px;
						color: #333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						&:hover {
							color: #5192fe;
						}
					}
					&.remark {
						display: inline-block;
						width: 90%;
						font-size: 13px;
						color: #333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						&:hover {
							color: #5192fe;
						}
					}
					&.time {
						font-size: 12px;
						color: #b0b0b0;
					}
				}
			}
			&:hover {
				background-color: #f9f9f9;
			}
		}
	}
	// 排行榜详情页身体 end
}
</style>
